<template>
  <page-frame>
    <div class="member-file memberFile">
      <div class="toptitle">
        <div class="left">会员档案</div>
        <div class="right">
          <div class="btns">
            <el-button @click="memberFile" class="lightGreenBtn">会员建档</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" @change="selectItem" @clear="clearItem" v-model="fileId"
                           clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="fileId=='1'">
                <el-input v-model="searchData.memberName" @keyup.enter.native="loadTableData" placeholder="请选择会员姓名">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='2'">
                <el-input v-model="searchData.phone" @keyup.enter.native="loadTableData" placeholder="请选择手机号">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='3'">
                <el-select v-model="searchData.lidList" @change="loadTableData" multiple placeholder="请选择护理等级">
                  <el-option
                    v-for="item in nursingGradeOptions"
                    :label="item.lname"
                    :value="item.lid">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item" v-show="fileId=='4'">
                <el-date-picker
                  v-model="dateCheckin"
                  type="daterange"
                  @change="loadTableData"
                  placeholder="选择日期范围">
                </el-date-picker>
              </div>
              <div class="input-item" v-show="fileId=='5'">
                <el-select v-model="searchData.type" @change="loadTableData" placeholder="请选择会员类型">
                  <el-option
                    v-for="item in CONSTANT_MEMBER_TYPE_OPTION"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button class="query lightGreenBtn" @click="loadTableData">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            @row-dblclick="handleCurrentChange"
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="memberNo"
              label="会员编号"
              min-width="108"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员姓名"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              width="65"
            >
            </el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="65"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号"
              min-width="125"
            >
            </el-table-column>
            <el-table-column
              prop="lid"
              label="护理等级"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="dateCheckin"
              width="115"
              label="入会时间"
            >
            </el-table-column>
            <el-table-column
              prop="urgentContactName"
              label="紧急联系人"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="urgentPhone"
              label="紧急联系电话"
              min-width="125"
            >
            </el-table-column>
            <el-table-column
              prop="memberSource"
              label="会员来源"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="memberType"
              label="会员类型"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="130"
            >
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="edit(scope.row.memberId)">修改</el-button>
                <!--<el-button type="text" size="small" @click.stop="QRCode(scope.row.memberId)">二维码</el-button>-->
                <el-button type="text" size="small" @click.stop="checkIn(scope.row.memberId)"
                           v-show="scope.row.checkInStatus===0">申请入住
                </el-button>
                <!--<el-button type="text" size="small" @click.stop="makePlan(scope.row)" v-show="scope.row.checkInStatus===0">制定计划</el-button>-->
                <span class="checkInStatusName" v-show="scope.row.checkInStatus===1">入住审核</span>
                <span class="checkInStatusName" v-show="scope.row.checkInStatus===2">已入住</span>
              </template>
            </el-table-column>

          </el-table>
          <!--二维码弹框-->
          <el-dialog title="用户二维码" v-model="QRCodeStatus" size="tiny" :close-on-click-modal="false">
            <p class="QRCode title">
              <span v-model="QRCodeName">{{QRCodeName}}</span>的二维码
            </p>
            <div class="QRCode">
              <img :src="url" alt="">
            </div>
          </el-dialog>
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import fileApi from '../../service/member/fileApi';
  import servicePlanApi from '../../service/serManagement/servicePlanApi';
  import {CONSTANT_MEMBER_TYPE_OPTION} from '../../config/constant';
  export default {
    methods: {
      init(){
        this.loadTableData();
        this.getCareLevel();
        this.judgeType();
      },
      /**
       * 分页查询
       */
      loadTableData(){
        let self = this;
        if (self.dateCheckin.length == 0 || self.dateCheckin[0] == null && self.dateCheckin[1] == null) {//时间为空
          self.searchData.dateCheckinBegin = '';
          self.searchData.dateCheckinEnd = '';
        } else {//不为空
          self.searchData.dateCheckinBegin = self.dateCheckin[0];
          self.searchData.dateCheckinEnd = self.dateCheckin[1];
        }
        fileApi.getMemberFileTabs(10, self.currentPage, self.searchData).then(function (response) {
          self.tableData = response.data.data.list;
          for (var member of self.tableData) {
            switch (member.gender) {
              case 0:
                member.sex = "男";
                break;
              case 1:
                member.sex = "女";
                break;
            };
          };
          self.judgeType();

          self.laiyuan();
          if (!response.data.data.total) {
            self.total = 1;
          } else {
            self.total = response.body.data.total;
          }
        })
      },

      laiyuan(){
        let self = this;
        for(let i = 0;i<self.tableData.length;i++){
          switch (self.tableData[i].memberSource) {
            case "0":
              self.tableData[i].memberSource = "微信";
              break;
            case "1":
              self.tableData[i].memberSource = "PC";
              break;
          }
        }
      },

      /**
       * 判断会员类型
       */
      judgeType(){
        let self = this;
        for(let i = 0;i<self.tableData.length;i++){
          switch(self.tableData[i].type){
            case 1:
              self.tableData[i].memberType = "外部会员";
              self.tableData[i].checkInStatus = 0;
              break;
            case 2:
              self.tableData[i].memberType = "入住会员(待审核)";
              self.tableData[i].checkInStatus = 1;
              break;
            case 0:
              self.tableData[i].memberType = "入住会员";
              self.tableData[i].checkInStatus = 2;
              break;
          }
        }
      },
      /**
       * 会员建档
       */
      memberFile(){//way:1代表新建档案
        this.$router.push({name: "memberFileInfo", params: {memberId: 0, way: 1}});
      },
      /**
       * 申请入住
       */
      checkIn(val){//入住
        this.$router.push({name: "checkInProcess01", params: {memberId: val, currentType: 'submitApply'}});
      },
      /**
       * 制定服务计划
       */
      makePlan(val){
        this.$router.push({name: "externalMemPlan", params: {memberObj: val}});
      },
      /**
       * 修改
       */
      edit(val){//修改 way:2代表编辑档案
        this.$router.push({name: "memberFileInfo", params: {memberId: val, way: 2}});
      },
      /**
       * 点击查看二维码(操作)
       */
      QRCode(){
        this.QRCodeStatus = true;
      },
      /**
       * 双击查看详情
       */
      handleCurrentChange(val) {//way:0代表查看档案
        this.$router.push({name: "memberFileInfo", params: {memberId: val.memberId, way: 0}});
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.searchData.memberName = '';
        this.searchData.phone = '';
        this.searchData.lidList = [];
        this.dateCheckin = [];
        this.searchData.type = null;
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 获得照护等级
       */
      getCareLevel(){
        let self = this;
        servicePlanApi.getCareLevel().then(
          (response) =>{
          self.nursingGradeOptions = response.data.data;
      }
      )
        ;
      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        QRCodeStatus: false,
        QRCodeName: '浩龙哥',
        url: "//qr.api.cli.im/qr?data=http%3A%2F%2Fqr02.cn%2FM60azI&level=H&transparent=&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=220&kid=cliim&time=1494332594&key=b08461b03e4de87ed07ab8beb4464f3c",
        fileId: 1,
        CONSTANT_MEMBER_TYPE_OPTION,
        dateCheckin: [],
        searchData: {
          memberName: '',
          phone: '',
          lidList: [],
          dateCheckinBegin: "",
          dateCheckinEnd: "",
          type: null,
        },
        nursingGradeOptions: [],
        fileList: [{
          fileId: 1,
          fileName: "会员姓名"
        }, {
          fileId: 2,
          fileName: "手机号",
        }, {
          fileId: 3,
          fileName: "护理等级",
        }, {
          fileId: 4,
          fileName: "入会时间",
        }, {
          fileId: 5,
          fileName: "会员类型",
        }],
        tableData: [],
        total: 0,
        currentPage: 1,
      }
    },

  }
</script>
<style>

  .input .btns {
    float: none !important;
    display: inline-block;
  }

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .el-pagination {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .el-select {
    display: block;
    position: relative;
  }

  .memberFile .el-dialog.el-dialog--tiny {
    width: 408px;
    height: 371px;
  }

  .memberFile span.checkInStatusName {
    color: #8391a5;
    margin: 0 7px;
    font-size: 12px;
  }
</style>

